<!DOCTYPE html>
<html>

<!-- 网站的头部 -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Easy Cat Timer</title>

    <!-- icon文件 -->
    <link type="image/x-icon" href="./favicon.ico" rel="icon">

    <!-- 样式文件：timer -->
    <link rel="stylesheet" href="./css/timer/other/font.css">
    <link rel="stylesheet" href="./css/timer/other/initial.css">
    <link rel="stylesheet" href="./css/other/style/background.css">
    <link rel="stylesheet" href="./css/other/style/main.css">
    <link rel="stylesheet" href="./css/other/style/logo.css">
    <link rel="stylesheet" href="./css/other/style/navigationBar.css">
    <link rel="stylesheet" href="./css/other/style/topMenu.css">
    <link rel="stylesheet" href="./css/other/animation/navigationBar.css">
    <link rel="stylesheet" href="./css/other/animation/topMenu.css">
    <link rel="stylesheet" href="./css/timer/style/timerApp.css">
    <link rel="stylesheet" href="./css/timer/style/titleBarUi.css">
    <link rel="stylesheet" href="./css/timer/style/countdownUi.css">
    <link rel="stylesheet" href="./css/timer/style/timingUi.css">
    <link rel="stylesheet" href="./css/timer/style/settingUi.css">
    <link rel="stylesheet" href="./css/timer/animation/titleBarUi.css">
    <link rel="stylesheet" href="./css/timer/animation/countdownUi.css">
    <link rel="stylesheet" href="./css/timer/animation/timingUi.css">
    <link rel="stylesheet" href="./css/timer/animation/settingUi.css">
    <link rel="stylesheet" href="./css/media/media.css">
</head>

<!-- 网站的身体 -->

<body>

    <!-- 音效 -->
    <div id="audios">

        <!-- 音效：按钮按下 -->
        <audio class="buttonDown" src="asset/audio/ButtonDown.wav" preload="auto"></audio>
        <!-- 音效：按钮抬起 -->
        <audio class="buttonUp" src="asset/audio/ButtonUp.wav" preload="auto"></audio>

        <!-- 音效：增加或减少数字 -->
        <audio class="addOrLessNumber" src="asset/audio/AddOrLessNumber.wav" preload="auto"></audio>

        <!-- 音效：猫咪站起来 1 -->
        <audio class="catUp1" src="asset/audio/CatUp-01.wav" preload="auto"></audio>
        <!-- 音效：猫咪站起来 2 -->
        <audio class="catUp2" src="asset/audio/CatUp-02.wav" preload="auto"></audio>
        <!-- 音效：猫咪站起来 3 -->
        <audio class="catUp3" src="asset/audio/CatUp-03.wav" preload="auto"></audio>

        <!-- 音效：猫咪坐下 1 -->
        <audio class="catDown1" src="asset/audio/CatDown-01.wav" preload="auto"></audio>
        <!-- 音效：猫咪坐下 2 -->
        <audio class="catDown2" src="asset/audio/CatDown-02.wav" preload="auto"></audio>
        <!-- 音效：猫咪坐下 3 -->
        <audio class="catDown3" src="asset/audio/CatDown-03.wav" preload="auto"></audio>

        <!-- 音效：完成 -->
        <audio class="complete" src="asset/audio/Complete.mp3" preload="auto"></audio>

    </div>

    <!--背景（为了触发点击事件）-->
    <div id="background"></div>

    <!--内容-->
    <main id="main">

        <!-- Logo -->
        <div id="logo">

            <!-- Logo的图片 -->
            <div class="image"></div>

        </div>

        <!--装饰图片-->
        <div class="decoration-image">
            <img src="asset/image/other/dragon.png" alt="Timer Decoration">
        </div>
        <style>
            /*我额外增加的装饰物*/
            .decoration-image {
                position: relative;
                width: 0px;
            }

            .decoration-image img {
                position: absolute;
                height: 170%;
                aspect-ratio: 1/1;
                top: -61%;
                transform: translateX(-44%);
                object-fit: contain;
            }
        </style>

        <!-- 计时器 -->
        <div id="timerApp">
            <!-- 界面：定时 -->
            <div id="timingUi" class="ui">

                <!-- 背景 -->
                <div class="background">

                    <!-- 灰色的背景 -->
                    <div class="gray"></div>
                    <!-- 黄色的背景 -->
                    <div class="yellow"></div>

                </div>


                <!-- 时间 -->
                <div>

                    <!-- 文字 -->
                    <div class="clock">

                        <!-- 文字：冒号 -->
                        <p class="colonText">:</p>
                        <!-- 文字：分钟 -->
                        <p class="minuteText">24</p>
                        <!-- 文字：秒钟 -->
                        <p class="secondsText">00</p>

                    </div>

                    <!--按钮-->
                    <div>

                        <!--分钟的按钮-->
                        <div class="minuteButtons">

                            <!--按钮：数字-->
                            <button class="numberButton"></button>
                            <!--按钮：增加-->
                            <button class="addButton"></button>
                            <!--按钮：减少-->
                            <button class="lessButton"></button>

                        </div>

                        <!--秒钟的按钮-->
                        <div class="secondsButtons">

                            <!--按钮：数字-->
                            <button class="numberButton"></button>
                            <!--按钮：增加-->
                            <button class="addButton"></button>
                            <!--按钮：减少-->
                            <button class="lessButton"></button>

                        </div>

                    </div>

                </div>


                <!-- 开始 -->
                <div>

                    <!-- 开始按钮 -->
                    <div class="start">

                        <!-- 按钮：开始 -->
                        <button class="button"></button>
                        <!-- 图片：下划线 -->
                        <div class="line"></div>

                    </div>

                </div>


                <!-- 修改时间 -->
                <div class="changeClockInput">

                    <!-- 关闭按钮（用来关闭输入框哒） -->
                    <button class="closeButton"></button>

                    <!-- 分钟 -->
                    <div class="minute">
                        <!-- 输入框 -->
                        <input class="input" type="text" maxlength="2" value="20" />
                    </div>

                    <!-- 秒钟 -->
                    <div class="seconds">
                        <!-- 输入框 -->
                        <input class="input" type="text" maxlength="2" value="00" />
                    </div>

                </div>

            </div>


            <!-- 界面：倒计时 -->
            <div id="countdownUi" class="ui">

                <!-- 时间 -->
                <div class="time">

                    <!-- 文字：时间 -->
                    <p class="timeText">00:00</p>

                </div>

                <!-- 时间到了 -->
                <div class="timeIsUp">

                    <!-- 图片：时间到了 -->
                    <div class="image"></div>

                </div>

                <!-- 暂停 -->
                <div class="paused">

                    <!-- 背景：灰色 -->
                    <div class="background"></div>
                    <!-- 图片：已暂停 -->
                    <div class="pausedImage"></div>
                    <!-- 文字：时间 -->
                    <p class="timeText">00:00</p>

                </div>

                <!-- 黑色的猫 -->
                <div class="blackCat">

                    <!-- 猫 -->
                    <div class="cat">

                        <!-- 身体 -->
                        <div class="body"></div>
                        <!-- 嘴巴 -->
                        <div class="mouth"></div>
                        <!-- 闭嘴 -->
                        <div class="close"></div>

                    </div>

                    <!-- 绳子 -->
                    <div class="rope">

                        <!-- 线 -->
                        <div class="line"></div>
                        <!-- 文字 -->
                        <div class="text">
                            <!-- 文字：重置 -->
                            <div class="reset"></div>
                        </div>

                    </div>

                </div>

                <!-- 黄色的猫 -->
                <div class="yellowCat">

                    <!-- 猫 -->
                    <div class="cat">

                        <!-- 身体 -->
                        <div class="body"></div>
                        <!-- 嘴巴 -->
                        <div class="mouth"></div>
                        <!-- 闭嘴 -->
                        <div class="close"></div>
                        <!-- 手 -->
                        <div class="hand"></div>

                    </div>

                    <!-- 绳子 -->
                    <div class="rope">

                        <!-- 线 -->
                        <div class="line"></div>
                        <!-- 文字 -->
                        <div class="text">
                            <!-- 文字：暂停 -->
                            <div class="pause"></div>
                            <!-- 文字：恢复 -->
                            <div class="resume"></div>
                        </div>

                    </div>

                </div>

            </div>


            <!-- 界面：设置 -->
            <div id="settingUi" class="ui">

                <!-- 背景 -->
                <div>

                    <!-- 左边的背景图 -->
                    <div class="leftBackground"></div>
                    <!-- 这是一个很大的Button：点击这个Button，可以关闭界面 -->
                    <button class="closeButton"></button>
                    <!-- 对话框 -->
                    <div class="bubbleBox"></div>
                    <div class="roundedCorner"></div>
                    <!-- 右边的背景图 -->
                    <div class="rightBackground"></div>

                </div>


                <!-- Logo -->
                <div>

                    <!-- 分割线 -->
                    <div class="divideLine"></div>
                    <!-- Logo -->
                    <div class="logo"></div>
                    <!-- 版本号 -->
                    <div class="version"></div>

                    <!-- 按钮：Github -->
                    <a class="githubButton" href="https://github.com/xujiangjiang/Easy-Cat-Timer" target="_blank"></a>
                    <!-- 按钮：Staff -->
                    <button class="staffButton"></button>

                </div>


                <!-- Staff面板 -->
                <div>

                    <!-- Staff面板 -->
                    <div class="staffPanel"></div>

                </div>


                <!-- 选项 -->
                <div>

                    <!-- 选项名 -->
                    <div class="settingTitle"></div>

                    <!-- 音量 -->
                    <div class="volume">

                        <!-- 滑动条：音量 -->
                        <div class="volumeSlider">
                            <!-- 滑动条的背景 -->
                            <div class="background"></div>
                            <!-- 滑动条的圆形（用来拖动这个滑动条） -->
                            <div class="round"></div>
                        </div>

                        <!-- 滑动条：音量（移动端） -->
                        <div class="inputVolumeSlider">
                            <!--input-->
                            <input class="input" type="range" value="100" min="0" max="100" step="10" />
                        </div>

                        <!-- 音量的大小 -->
                        <div class="volumeNumber">
                            <!-- 音量数字 的背景 -->
                            <div class="background"></div>
                            <!-- 音量的数字 -->
                            <p class="number">100</p>
                        </div>

                    </div>

                    <!-- 语言 -->
                    <div class="language">

                        <!-- 语言：当前的语言 -->
                        <button class="currentLanguage">

                            <!-- 中文 -->
                            <div class="chinese"></div>
                            <!-- 英语 -->
                            <div class="english"></div>

                        </button>

                        <!-- 语言：选择的语言 -->
                        <div class="chooseLanguage">

                            <!-- 中文 -->
                            <a class="chinese" href="../chinese/index.html" target="_blank"></a>
                            <!-- 英语 -->
                            <a class="english" href="../english/index.html" target="_blank"></a>

                        </div>

                    </div>

                </div>

            </div>


            <!-- 界面：标题栏 -->
            <div id="titleBarUi" class="ui">

                <!-- 按钮：设置 -->
                <button class="settingToggle"></button>
                <!-- 按钮：最小化 -->
                <button class="minimumButton"></button>
                <!-- 按钮：关闭 -->
                <button class="closeButton"></button>

            </div>

        </div>

        <!-- 导航栏 -->
        <div id="navigationBar">

            <!-- 按钮：这是什么？ -->
            <a class="whatIsIt" href="./what-is-it/index.html" target="_blank">

                <!-- 气泡 -->
                <div class="bubble"></div>
                <!-- 盒子 -->
                <div class="rect"></div>
                <!-- 文字 -->
                <div class="text"></div>

            </a>

            <!-- 按钮：下载 -->
            <a class="download" href="./download/index.html" target="_blank">

                <!-- 气泡 -->
                <div class="bubble"></div>
                <!-- 盒子 -->
                <div class="rect"></div>
                <!-- 文字 -->
                <div class="text"></div>

            </a>

            <!-- 按钮：其他 -->
            <div class="other">

                <!-- 气泡 -->
                <div class="bubble"></div>
                <!-- 盒子 -->
                <div class="rect"></div>
                <!-- 文字 -->
                <div class="text"></div>

                <!-- 语言 -->
                <div class="language">

                    <!-- 盒子 -->
                    <div class="box"></div>
                    <!-- 箭头 -->
                    <div class="corner"></div>
                    <!-- 英文 -->
                    <a class="english" href="../english/index.html" target="_blank">English</a>
                    <!-- 中文 -->
                    <a class="chinese" href="../chinese/index.html" target="_blank">简体中文</a>

                </div>

            </div>

        </div>

    </main>

    <!-- 上方菜单 -->
    <nav id="topMenu">

        <!-- 按钮 -->
        <div class="openButton">

            <!-- 图片 -->
            <div class="image"></div>

        </div>

        <!-- 菜单 -->
        <div class="menu">

            <!-- 按钮 -->
            <div class="buttons">

                <!-- Logo -->
                <a class="logo" href="./index.html" target="_blank">
                    <!-- 图片 -->
                    <div class="image"></div>
                </a>

                <!-- 版本号 -->
                <div class="version">
                    <!-- 矩形 -->
                    <div class="rect"></div>
                    <!-- 尖角 -->
                    <div class="corner"></div>
                    <!-- 文字 -->
                    <div class="text">v1.0</div>
                </div>

                <!-- 这是什么？ -->
                <a class="whatIsIt" href="./what-is-it/index.html" target="_blank">
                    <!-- 文字:这是什么? -->
                    <div class="text">这是什么?</div><!--What's it?-->
                    <!-- 下划线 -->
                    <div class="line"></div>
                </a>

                <!-- 语言 -->
                <div class="language">
                    <!-- 文字:语言 -->
                    <div class="text">语言</div><!--Language-->
                    <!-- 下划线 -->
                    <div class="line"></div>

                    <!-- 可选的语言 -->
                    <div class="choose">
                        <!-- 盒子 -->
                        <div class="box"></div>
                        <!-- 箭头 -->
                        <div class="corner"></div>
                        <!-- 英文 -->
                        <a class="english" href="../english/index.html" target="_blank">English</a>
                        <!-- 中文 -->
                        <a class="chinese" href="../chinese/index.html" target="_blank">简体中文</a>
                    </div>
                </div>

                <!-- 空白 -->
                <div class="null"></div>

                <!-- 下载 -->
                <a class="download" href="./download/index.html" target="_blank">下载桌面版</a><!--Download-->

                <!-- 关闭 -->
                <div class="close">
                    <!-- 图片 -->
                    <div class="image"></div>
                </div>

            </div>

        </div>

    </nav>

</body>

<!-- 代码文件：timer -->
<script src="./js/other/ui/otherUi.js"></script>
<script src="./js/other/other/SupportIosTool.js"></script>
<script src="./js/other/other/SupportMobileTool.js"></script>
<script src="./js/other/otherApp.js"></script>
<script src="./js/timer/other/enums.js"></script>
<script src="./js/timer/other/tools.js"></script>
<script src="./js/timer/struct/time.js"></script>
<script src="./js/timer/data/datas.js"></script>
<script src="./js/timer/system/audioSystem.js"></script>
<script src="./js/timer/system/timeSystem.js"></script>
<script src="./js/timer/system/saveSystem.js"></script>
<script src="./js/timer/system/systems.js"></script>
<script src="./js/timer/ui/titleBarUi.js"></script>
<script src="./js/timer/ui/countdownUi.js"></script>
<script src="./js/timer/ui/timingUi.js"></script>
<script src="./js/timer/ui/settingUi.js"></script>
<script src="./js/timer/ui/uis.js"></script>
<script src="./js/timer/timerApp.js"></script>
<script src="./js/webManager.js"></script>
<script src="./js/nosleep/NoSleep.min.js"></script>

</html>